<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/audio.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
<style type="text/css">
			body{
				background: url(images/backgruand.png);
				position: relative;
			}

			.icon_1{
			width: 25px;
			/*float: right;*/
			cursor: pointer;
			}
			.icon_2{
				width: 23px;
				/*float: right;*/
				cursor: pointer;
			}
			#headI img{
				height: 200px;
				width: 200px;
				border-radius: 60%;
				transition: 0.5s;
				transform-origin: 30px 30px;
				animation: rotate 10s linear infinite;
				animation:rotate 10s linear infinite;
				-moz-animation:rotate 10s linear infinite;
				-webkit-animation:rotate 10s linear infinite;
				-o-animation:rotate 10s linear infinite;
				position: absolute;
				left: 1500px;
				top: 120px;
			}
			@keyframes rotate{
				transition: 0.5s;
				    transform-origin: 30px 30px;  
				    animation: rotate 10s linear infinite;
			}
			#headI span{
				position: absolute;
				left: 1530px;
				top: 400px;
				font-size: 40px;
			}
	
			.media-heading,.author{
				color:  white;
			}
			
			#music-body{
				width: 100%;
				height: 700px;
				position: relative;
			}
			#left_mu{
				width: 40%;
				
				float: left;
			}
			#music-foot {
				width: 80%;
				position: absolute;
				left: 170px;
				top: 670px;
				
			}

			.blur {
				filter: url(blur.svg#blur);
				/* FireFox, Chrome, Opera */
				background-position: center;
				background-size: cover;
				width: 130%;
				-webkit-filter: blur(10px);
				/* Chrome, Opera */
				-moz-filter: blur(10px);
				-ms-filter: blur(10px);
				filter: blur(10px);

				filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
				/* IE6~IE9 */
			}

			#disc {
				background-image: url(img/bg4.png);
				background-size: 100% 100%;
				/*height: 300px;
			width: 300px;*/
				margin-bottom: 40px;
			}

			#disc img {
				height: 55%;
				width: 55%;
				border-radius: 60%;
				margin-top: 22.5%;
			}

			#music-play {
				height: 50px;
				margin: 0px 20px;

			}

			#play {
				/*音乐播放按钮*/
				height: 30px;
				width: 30px;
			}

			#music-play>div {
				float: left;
			}

			#progress {
				width: 65%;
				height: 30px;
				padding: 10px;
			}

			#music-time {
				padding: 5px;
			}
			.icon{
				width: 35px;
				margin-bottom: 3px;
				vertical-align:bottom;
			}
			a{
				text-decoration: none;
			}
			#allpaly{
				color: gainsboro;
				border-color: grey;
				width: 100px;
				height: 40px;
				font-size: 20px;
			}
			#allpaly:hover{
				color: white;
				border-color: white;
			}
			#button1{
					margin-left: 160px;
			}
			#music_list{
				margin-left: 170px;
			}
			
			th{
				width: 300px;
				border: gainsboro;
				color: gainsboro;
				height:30px;
			}
			
			.td1,.th1{
				width: 60px;
				color: gainsboro;
				height:30px;
			}
			.th2{
				width: 450px;
				color: gainsboro;
				height:30px;
			}
			.th3{
				width: 300px;
				color: gainsboro;
				height:30px;
			}
			.th4{
				width: 150px;
				color: gainsboro;
				height:30px;
				
			}
			table{
				text-align: left;
				color: gainsboro;
			}
			.a142{
			    display: block;
			    width: 90px;
			    height: 40px;
			    float: left;
			    line-height: 39px;
			    margin-top: 24px;
			    padding: 0 9px;
			    margin-left: 10px;
			    font-size: 13px;
			    margin-right: 0;
			    border: 1px solid #c9c9c9;
			    color: #000;
			    text-align: center;
			}
			.th22{
				width: 150px;
			}
			#ta1{
				border:1px solid #808080;
				
			}
			.chick1{
				background: rgba(0,0,0,0);
			}
			table{
				
			}
	</style>
	</head>
	<body>
		<div id="tittle" style="font-size: 30px; color: gainsboro;">
			&nbsp;
		</div>
		<div id="headI">
				<img src="images/唱片.jpg" >
				<span>暂无歌词</span>
		</div>
		<div id="music-body" style="margin: 10px 0;">
			<div id="button1">
				<a class="a142" id="allpaly" onclick="saveAll();" href="javascript:void(0)" ><img class="icon" src="icon/收藏.png" >收藏</a>
				<a class="a142" id="allpaly" onclick="downloadAll();" href="javascript:void(0)" ><img class="icon" src="icon/下载.png">下载</a>
				<a class="a142" id="allpaly" onclick="delAll();" href="javascript:void(0)" ><img class="icon" src="icon/删除.png">删除</a>
				<a class="a142" id="allpaly" onclick="clear1();" href="javascript:void(0)" ><img class="icon" src="icon/清空.png">清空</a>
			</div><br /><br /><br /><br /><br /><br />
			<div id="music_list">
				<table id="ta1">
					<tr>
						<th class="th1"></th>
						<th class="th2">歌曲</th>
						<th class="th22"></th>
						<th class="th3">歌手</th>
						<th class="th4">时长</th>
					</tr>
				</table>	
				<table>	
				<c:forEach var="music"  items="${sessionScope.musicPlayList}">
				
					<tr class=""  onmousemove="change_5('t${music.mid}');"onmouseout="change_6('t${music.mid}')">
						<td class="td1" id="w${music.mid}"><input type="checkbox" name="" id="c${music.mid}" class="chick1" value="" /></td>
						<td class="th2">${music.name}</td>
						<td class="th22" id="t${music.mid}">
							<img style="display: none;" src="icon/播放.png" onclick="play('p${music.mid}');" id="p${music.mid}" class="icon_1" onmousemove="change_1('p${music.mid}');"onmouseout="change_2('p${music.mid}')">
							<img style="display: none;" src="icon/下载 (1).png" onclick="download('l${music.mid}');" id="l${music.mid}" class="icon_2" onmousemove="change_3('l${music.mid}');"onmouseout="change_4('l${music.mid}')">
							<img style="display: none;" src="icon/删除-填充.png" onclick="del('d${music.mid}');" id="d${music.mid}" class="icon_2" onmousemove="change_7('d${music.mid}');"onmouseout="change_8('d${music.mid}')">
							<c:set value="1" var="visitCount" property="visitCount" />
						<c:forEach var="music2"  items="${listF}">
							<c:if test="${music.mid==music2.mid}">
									<img style="display: none;" src="icon/收藏 (2).png" onclick="" id="s${music.mid}" class="icon_2" onmousemove="" onmouseout="">
									<c:set value="0" var="visitCount" property="visitCount" />
							</c:if>
						</c:forEach>
						<c:if test="${visitCount==1}">
								<img style="display: none;" src="icon/收藏 (1).png" onclick="save('s${music.mid}');" id="s${music.mid}" class="icon_2" onmousemove="change_9('s${music.mid}');"onmouseout="change_10('s${music.mid}')">
						</c:if>
						</td>
						<td class="th3">${music.singer}</td>
						<td class="th4">${music.time}</td>
					</tr>
          		</c:forEach>
				</table>


			
			
			
			
			</div>
			<div id="music-foot">
						<audio id="music" controls="controls" autoplay="" loop="loop" preload="auto" style="width:75%;">
							<source id="Pmp3" src="" type='audio/mp3' />
						</audio>
			</div>
		</div>
		<div id="" class="muicList">
		
		</div>
	</body>
</html>
